<!DOCTYPE html>
<html>
<head>
  <style>
    .scroller {
      width: 300px;
      height: 300px;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }

    #column {
      /* Initially the content doesn't overflow so it won't be composited. */
      width: 100px;
      height: 100px;
      background: silver;
    }
  </style>
  <script>
    if (window.testRunner)
      testRunner.dumpAsText();

    window.addEventListener('load', function() {
      // Introducing overflow should enable composited scrolling.
      var column = document.getElementById('column');
      column.style.width = '1000px';
      column.style.height = '1000px';
      if (window.testRunner)
        document.getElementById('layers').innerHTML = internals.layerTreeAsText(document);
    }, true);
  </script>
</head>

<body>
  <div class="scroller">
    <div id="column">
    </div>
  </div>
  <pre id="layers">Layer tree goes here in DRT</pre>
</body>
</html>
